<template>
  <!-- 平台素材中组件 -->
  <div class="pmc">

    <el-tabs v-model="activeTab" @tab-click="doChangeTab">
      <el-tab-pane label="图片管理" name="picture"></el-tab-pane>
      <el-tab-pane label="视频管理" name="video"></el-tab-pane>
    </el-tabs>

    <div class="content">

      <div class="left" v-loading="leftLoading">
        <el-tree :data="treeFolderList" 
          ref="folderTreeRef"
          node-key="folderId" 
          :props="{ children: 'children', label: 'folderName' }" 
          :highlight-current="true" 
          @current-change="doChangeFolder">
        </el-tree>
      </div>

      <div class="right flex-item" v-loading="rightLoading">

        <!-- 查询块 -->
        <div class="query-box">
          <el-input v-model="defaultQuery.materialName" 
            placeholder="请输入素材名称" 
            @keyup.enter.native="doSearch"
            class="width-300">
          </el-input>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="doSearch">查询</el-button>
            <el-button @click="doResetSearch">重置</el-button>
          </el-button-group>
        </div>

        <!-- 按钮块 -->
        <div class="flex" style="align-items: center;">
          <div class="flex-item">
            <span v-if="currentFolderPath" class="line-1 cursor-p pad-r-10" :title="currentFolderPath">{{ currentFolderPath }}</span>
          </div>
          <el-button @click="doAddFolder">新建文件夹</el-button>

          <el-button type="primary" @click="materialVisible = true">上传文件</el-button>
        </div>

        <!-- 素材列表 -->
        <template v-if="materialList.length > 0">
          <div class="m-l">
            <div v-for="(item,index) of materialList" :key="index" class="material-box">
              <el-image class="width-per-100" 
                :src="item.materialPlatformUrl" 
                :preview-src-list="[item.materialPlatformUrl]">
              </el-image>
              <div class="material-content">
                <div class="line-one cursor-p" :title="item.materialName">{{ item.materialName }}</div>
                <div class="line-one m-p">
                  <span v-if="item.materialWidth">{{ item.materialWidth }}*{{ item.materialHeight }}</span>
                </div>
                <div class="line-one m-p">{{ item.materialSize }}KB</div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="font-color-9 flex flex-center" style="height: 70%;">
            暂无素材数据
          </div>
        </template>
        <!-- 列表分页 -->
        <el-pagination background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10]"
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

    </div>

    <el-divider></el-divider>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary">确定</el-button>
      <el-button>取消</el-button>
    </div>

    <!-- 文件夹dialog -->
    <el-dialog title="新建文件夹" :visible.sync="folderVisible" append-to-body :center="true" width="500px">
      <folder-dialog :showFlag="folderVisible"
        :folderObj="folderObj"
        :folderList="folderList"
        @callback="doCallbackFolder"
      >
      </folder-dialog>
    </el-dialog>

    <!-- 素材dialog -->
    <el-dialog title="上传素材" :visible.sync="materialVisible" append-to-body :center="true" width="600px">
      <material-dialog :showFlag="materialVisible"
        :platformType="platformType"
        :shopId="shopId"
        :materialType="materialType"
        :currentFolderId="selectFolderObj.folderId"
        :folderList="folderList"
        @callback="doCallbackMaterial"
      >
      </material-dialog>
    </el-dialog>

  </div>
</template>

<script>
  import { getFolderTree } from '@/api/third/thirdMaterialFolder'
  import { pagingThirdMaterial } from '@/api/third/thirdMaterial'

  import folderDialog from './folder-dialog'
  import materialDialog from './material-dialog'
  
  export default {
    components: {
      folderDialog,
      materialDialog
    },
    props: {
      // 平台类型
      platformType: {
        type: Number,
        required: true
      },
      // 店铺id
      shopId: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        activeTab: 'picture',
        activeSubTab: 'all',
        leftLoading: false,
        rightLoading: false,
        // 默认查询表单
        defaultQuery: {
          currentPage: 1,
          size: 10,
          materialName: ''
        },
        // 查询表单
        searchListQuery: {},
        // 文件夹对象
        folderObj: {},
        // 选中的文件夹
        selectFolderObj: {},
        // 当前文件夹路径
        currentFolderPath: '',
        // 文件夹visible
        folderVisible: false,
        // 素材visible
        materialVisible: false,
        // 文件夹列表
        folderList: [],
        // 树列表
        treeFolderList: [],
        // 素材列表
        materialList: [],
        // 文件夹visible
        total: 0
      }
    },
    computed: {
      materialType() {
        return this.activeTab === 'picture' ? 1 : 2
      }
    },
    created() {
      this.searchListQuery = { ...this.defaultQuery }
      this.initFolderTree().then(() => {
        this.$nextTick(() => {
          // 默认点击第一个
          if (this.$refs['folderTreeRef'] && this.$refs['folderTreeRef'].$children) {
            this.$refs['folderTreeRef'].$children[0].$el.click()
          }
        })
      })
    },
    methods: {
      initFolderTree() {
        const form = {
          platformType: this.platformType,
          shopId: this.shopId
        }
        return getFolderTree(form).then((response) => {
          if (response.isError) return
          const originData = this.$options.data()
          this.folderList = originData.folderList
          this.treeFolderList = originData.treeFolderList

          Object.assign(this.treeFolderList, response.data)
          this.treeFolderList.unshift({ folderId: '0', folderName: '全部素材' })
          this.folderList = response.data
        })
      },
      // tab切换事件
      doChangeTab() {
        this.initMaterialList()
      },
      // 文件夹切换事件
      doChangeFolder(item, node) {
        if (item.folderId === this.selectFolderObj.folderId) {
          return
        }
        this.selectFolderObj = item
        const paths = []
        this.loopTextPath(paths, node)
        paths.reverse()
        this.currentFolderPath = paths.join(' > ')
        this.initMaterialList()
      },
      // 获取素材列表
      initMaterialList() {
        const size = this.searchListQuery.size
        const currentPage = this.searchListQuery.currentPage
        this.searchListQuery = { ... this.defaultQuery }
        this.searchListQuery.size = size
        this.searchListQuery.currentPage = currentPage
  
        this.searchListQuery.delFlag = 0
        this.searchListQuery.shopId = this.shopId
        this.searchListQuery.platformType = this.platformType
        this.searchListQuery.materialType = this.materialType
        this.searchListQuery.folderId = this.selectFolderObj.folderId === '0' ? '' : this.selectFolderObj.folderId
  
        this.rightLoading = true
        pagingThirdMaterial(this.searchListQuery).then((response) => {
          this.rightLoading = false
          if (response.isError) return
          this.total = response.data.total
          this.materialList = response.data.records
        })
      },
      // 文本拼装
      loopTextPath(paths, node) {
        paths.push(node.data.folderName)
        if (node.level > 1) {
          this.loopTextPath(paths, node.parent)
        }
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.initMaterialList()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.defaultQuery = originData.defaultQuery
        this.doSearch()
      },
      // 创建文件夹
      doAddFolder() {
        const originData = this.$options.data()
        this.folderObj = originData.folderObj
        this.folderObj = {
          parentFolderId: this.selectFolderObj.folderId,
          shopId: this.shopId,
          platformType: this.platformType
        }
        this.folderVisible = true
      },
      // 素材回调事件
      doCallbackMaterial(callbackFlag) {
        if (callbackFlag) {
          this.initMaterialList()
        }
        this.materialVisible = false
      },
      // 文件夹回调事件
      doCallbackFolder(callbackFlag) {
        if (callbackFlag) {
          this.initFolderTree()
        }
        this.folderVisible = false
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initMaterialList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initMaterialList()
      }
    }
  }
</script>

<style lang="less" scoped>
  .pmc {
    padding: 0 20px;
  }
  .content {
    display: flex;
    height: 560px;
    .left {
      height: inherit;
      border-right: 1px solid gainsboro;
      margin-right: 10px;
      padding-right: 10px;
      /deep/ .el-tree {
        height: inherit;
        overflow: auto;
        width: 188px;
        &::-webkit-scrollbar {
          width: 4px;
          height: 4px;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 5px;
          -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
          background: rgba(0,0,0,0.2);
        }
        &::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
          border-radius: 0;
          background: rgba(0,0,0,0.1);
        }
      }
      /deep/ .el-tree-node__content {
        padding: 15px;
      }
      /deep/ .el-tree-node {
        width: fit-content;
      }
      /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content,
      /deep/ .el-tree-node__content:hover {
        background-color: unset;
        color: #409eff;
      }
    }

    .query-box {
      display: flex;
      justify-content: flex-end;
      border-bottom: 1px solid gainsboro;
      padding-bottom: 15px;
      margin-bottom: 15px;
    }

  }

  .m-l {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;

    .material-box {
      margin: 0 10px 10px 10px;
      border: 1px solid #dbdbdb;
      width: 118px;

      /deep/ .el-image {
        padding: 0 0.5px;
        height: 118px;
        display: block;
      }
      /deep/ .el-image-viewer__close {
        color: white;
      }
      .material-content {
        width: inherit;
        height: 70px;
        font-size: 12px;
        padding: 5px 10px;

        .line-one {
          /*! autoprefixer: off */
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .m-p {
          color: #999999;
        }
      }
    }
  }

  /deep/ .el-pagination {
    padding: 10px 0;
    text-align: right;
  }

  /deep/ .el-divider--horizontal {
    margin: 10px 0;
  }
</style>
